<template>
	<view class="shopcar-container">
		<view class="custom-navbar">
			<u-navbar  	 title=" " :is-back="false" 
						:border-bottom="false" 
						:background="navbarBg">
				<view class="navbar-box">
					<view>
						<u-search :show-action="false" 
									bg-color="#ffffff"
									placeholder="搜索您想要的商品" v-model="searchWord"></u-search>
					</view>
				</view>		
			</u-navbar>
		</view>
		 <!-- 信息栏 -->
		<view class="u-flex u-row-between u-col-center"
			:style="'font-size:30rpx; padding:10rpx 30rpx; width: 100%;height:'+firstBannerHeight+'px'">
			<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;height: 100%;width: 75%;padding-bottom: 10rpx;">
				<view class="u-flex u-row-left u-col-center" style="width: 100%;height: 100%;">
					<view class="">
						<u-icon name="thumb-up-fill" size="32rpx" color="#f29100"></u-icon>
					</view>
					<view class="u-m-l-16 u-m-r-16 u-line-1">
						<text>甜诺烘焙</text>
					</view>
					<view style="position: relative;">
						<u-icon name="heart"  size="32rpx" 
								v-if="starFlag==false" @click="changeStar(0)">
						</u-icon>
						<u-icon name="heart-fill" color="#fa3534"  size="32rpx"
								v-if="starFlag==true" @click="changeStar(1)"></u-icon>
						<u-badge size="mini" :offset="heartCount<100?[-12,-30]:[-12,-55]" :overflow-count="9999" :absolute="true" type="error" :count="heartCount"></u-badge>
					</view>
				</view>
				<view class="u-flex u-row-left u-col-center ">
					<view>
						<u-icon name="map-fill" color="#2979ff" size="32rpx"></u-icon>
					</view>
					<view class="u-m-l-16 u-m-r-10 u-line-1" style="width: 62%;">
						<text v-if="deliveryWay">桑植县新城美高KTV旁边甜诺烘焙</text>
						<text v-if="!deliveryWay">
							{{defaultAddress.addressInfo?defaultAddress.addressInfo:'请选择配送地址'}}
						</text>
					</view>
					<view style="margin-bottom: 8rpx;" >
						<u-tag v-if="deliveryWay"  @click="toGuide()"  text="导航" mode="light" shape="circle" type="primary" size="mini"/>
						<u-tag v-else text="送到这" mode="light" shape="circle" type="primary" size="mini"/>
					</view>
				</view>
			</view>
			<view style="width: 24%;">
				<selectSwitch @change="changeSwitch" :checked_bj_color="'#fa3534'"  :switchList="['自取','外卖']"/>
			</view>
		</view>
		 <!-- 商品列表-->
		<view  :style="'margin:5px 0px;width: 100%;height:'+scrollViewHeight+'px'">
			   <long-categories  :scrollViewHeight="scrollViewHeight"   :list="goodList"  
								@toGoodDetail="toGoodDetail"   @change="changeShopCar">
				</long-categories>
		</view>
		<!-- 底部 -->
		<view class="foot-box"  v-if="selectedGoods.length>0"   :style="'height:'+(footerHeight)+'px;'">
			<view class="footer-tip"  :style="'width:'+(windowWidth-40)+'px; height:'+(footerHeight/3)+'px'">
				<view style="font-weight: 600;color:#FFFFFF;">(食品/包装以食物为准，图片仅供参考)</view>
			</view>
			<view  class="shop-order"  :style="'width:'+(windowWidth-40)+'px; height:'+(footerHeight/3*2-20)+'px;'">
				<view @click="showCar()" style="width: 70%;padding-left: 10%;height: 100%;display:flex;flex-direction: row; justify-content: flex-start;align-items: center;align-content: center;">
					<view class="u-flex" style="height: 100%;">
						<u-icon name="shopping-cart"   size="46" color="#ffffff"></u-icon>
						<view  style="margin-bottom: 30rpx; height: 40rpx;width: 40rpx;border-radius:50%;">
							<view  v-if="selectedGoods.length>0" style="height: 40rpx;width: 40rpx;background-color:#FF4B67; text-align: center;border-radius:50%;">{{totalCount}}</view>
						</view>
					</view>
					<view style="height: 100%;" class="u-m-l-30 u-flex">
						<view>¥</view><view style="font-size: 46rpx;">{{totalPrice}}</view>
					</view>
				</view>
				<view @click="toConfirmOrder()" style="height: 100%; width: 30%; display:flex;flex-direction: row; justify-content: center;align-items: center;color: #ffffff;text-align: center;">
					<view>去下单</view>
				</view>
			</view>
		</view>
	
		<u-popup v-model="showCarFlag" mode="bottom" border-radius="16" >
			<view style="padding:8rpx 20rpx;font-size: 28rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
				<view  style="margin-bottom: 20rpx; width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<view style="font-weight: bold;">购物车</view>
					<view @click="clearShopCar()" style="margin-right: -16rpx;padding: 8rpx 10rpx;">
						<u-tag  text="清空" mode="light" shape="circle" type="error" size="mini"/>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view class="u-p-l-10 u-p-r-10">
						<view v-for="(good,index) in selectedGoods" :key="index" class="u-flex u-row-between u-col-center u-border-bottom">
							<view style="width: 50%;height: 100rpx;" class="u-flex u-row-left u-col-center">
								<view class="u-border-1"><u-image border-radius="4"   width="80rpx" height="80rpx" :src="good.url"></u-image></view>
								<view class="u-m-l-20">{{good.goodName}}</view>
							</view>
							<view style="width: 50%;" class="u-flex u-row-between u-col-center">
								<view class="u-p-t-10">
									<text>¥{{good.price}}</text>
									<text style="color:#C0C4CC;font-size: 24rpx;text-decoration:line-through;" class="u-m-l-20">¥{{good.salePrice}}</text>
								</view>
								<view class="u-m-l-6">
									<u-icon   @click="changeGoodNum(good,0)"   top="4" name="minus-circle-fill" color="#B5B1B2" size="28"></u-icon>
									<text style="height: 28rpx;line-height: 28rpx;margin: 0rpx 4rpx;">{{good.count}}</text>
									<u-icon @click="changeGoodNum(good,1)"  top="4" name="plus-circle-fill" color="#FF4B64" size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="shop-order" :style="'width:'+(windowWidth-20)+'px; height:'+(footerHeight/3*2-20)+'px;'">
					<view  style="width: 70%;padding-left: 10%;height: 100%;display:flex;flex-direction: row; justify-content: flex-start;align-items: center;align-content: center;">
						<view class="u-flex" style="height: 100%;">
							<u-icon name="shopping-cart"   size="46" color="#ffffff"></u-icon>
							<view  style="margin-bottom: 30rpx; height: 40rpx;width: 40rpx;border-radius:50%;">
								<view  v-if="selectedGoods.length>0" style="height: 40rpx;width: 40rpx;background-color:#FF4B67; text-align: center;border-radius:50%;">{{totalCount}}</view>
							</view>
						</view>
						<view style="height: 100%;" class="u-m-l-30 u-flex">
							<view>¥</view><view style="font-size: 46rpx;">{{totalPrice}}</view>
						</view>
					</view>
					<view @click="toConfirmOrder()" style="height: 100%; width: 30%; display:flex;flex-direction: row; justify-content: center;align-items: center;color: #ffffff;text-align: center;">
						<view>去下单</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
	import {tempGoodList} from "@/util/data/goodList.js"; 
	export default {
		components: {selectSwitch},
		data() {
			return {
				searchWord:"",
				heartCount:1000,
				totalCount:0,
				totalPrice:0.00,
				goodList: [],
				max: 10,
				windowWidth:0,
				pageHeight:0,
				firstBannerHeight:0,
				scrollViewHeight:0,
				footerHeight:0,
				selectedGoods:[],
				showCarFlag:false,
				customBtnStyle:{
					border:"none",
					width:"100rpx",
				},
				deliveryWay:true,
			};
		},
		//动态监听选中商品的变化
		watch:{
			selectedGoods:function(goodList){
				console.log("监听到购物车商品变化",goodList.length);
				if(goodList.length>0){
					this.$u.vuex("vuex_shopCarData",goodList);
					this.scrollViewHeight=this.pageHeight/10*7+20;
				}else{
					this.$u.vuex("vuex_shopCarData",[]);
					this.scrollViewHeight=this.pageHeight/10*9-10;
				}
			}	
		},
		created:function(){
			this.windowWidth= uni.getSystemInfoSync().windowWidth;
			let stateBarHeight=  uni.getSystemInfoSync().statusBarHeight;
			this.pageHeight= uni.getSystemInfoSync().windowHeight-stateBarHeight-50;
			this.firstBannerHeight=this.pageHeight/10;
			this.footerHeight=this.pageHeight/10*2-30;
			this.scrollViewHeight=this.pageHeight/10*9-10;
		},
		
		onLoad:function(option){
			console.log("option",option);
		},
		
		onShow:function(){
			let that=this;
			that.getGoodList();
		},

		
		methods:{
			//获取商品列表
			getGoodList:function(){
				let that=this;
				that.goodList=JSON.parse(JSON.stringify(tempGoodList));
				//如果购物车有数据，得重新渲染，如果从后台取数据，可以忽略
				console.log("获取商品列表");
				if(this.vuex_shopCarData.length>0){
					console.log("购物车中已经存在的商品",this.vuex_shopCarData);
					this.selectedGoods=this.vuex_shopCarData;
					this.totalCount=this.vuex_totalCount;
					this.totalPrice=this.vuex_totalPrice;
					for (let i = 0; i <this.selectedGoods.length; i++) {
						let selectGood= this.selectedGoods[i];
						this.reloadGoodList(selectGood);
					}
				}
			},
			//点赞
			changeStar:function(option){
				if(option==0){
					this.$u.vuex("starFlag",true);
					this.heartCount++;
				}else{
					this.$u.vuex("starFlag",false);
					this.heartCount--;
				}
				this.$forceUpdate();
			},
			//导航
			toGuide:function(){
				let that=this;
				if(that.deliveryWay){
					console.log("到门店去");
				}else{
					console.log("配送地址去",that.defaultAddress);
				}	
			},
			//切换配送方式
			changeSwitch:function(isSwitch){
				console.log("isSwitch",isSwitch);
				this.deliveryWay=isSwitch;
				if(isSwitch==false){
					this.$u.route({
						url:'/pages/common/my-address/my-address',
					})
				}
			},
			//子组件动态数据传入（添加购买商品或者减少购买商品的数量）
			changeShopCar (type,data) {
				let that=this;
				if(that.totalCount>4&&type==0){
					that.$u.toast("每笔订单限购5个商品,\r\n再来一单吧!");
					return;
				};
				let goodId= data.skuId;
				let newCount=data.count;
				//如果购物车为空,并且新增的商品数量大于0就加进去
				if(that.selectedGoods.length<1&&newCount>0){
					that.selectedGoods.push(data);
				}else{
					//是否需要插入的标志,false默认是需要插入的
					let flag=false;
					for (let i = 0; i < that.selectedGoods.length; i++) {
						let good= that.selectedGoods[i];
						let id=good.skuId;
						//已经存在此商品,直接更新,但是即便count=0,也不能在循环中删除,这样会引起数组下标错乱
						if(id==goodId){
							good.count=newCount;
							flag=true; 
							break;
						}
					}
					//购物车中没有此商品,需要插入
					if(flag==false){
						that.selectedGoods.push(data);
					}
					//这里要对数量为0的进行筛选去除
					if(newCount==0){
						let arr=[];
						for (let i = 0; i < that.selectedGoods.length; i++) {
							 let item= that.selectedGoods[i];
							 let num=item.count;
							 if(num>0){
								 arr.push(item);
							 }
						}
						that.selectedGoods=arr;
					}
				}
				//购物车总数量,总价做处理
				let totalCount=0;
				let totalPrice=0;
				for (let i = 0; i < that.selectedGoods.length; i++) {
					 let item= that.selectedGoods[i];
					 totalCount=totalCount+item.count;
					 totalPrice=totalPrice+(item.price*item.count);
				}
				that.totalCount=totalCount;
				//去小数,保留两位
				that.totalPrice=that.globalUtil.toDecimal(totalPrice);
				//按购买数量高低排序
				that.selectedGoods.sort((x,y)=>{
					return x.count>y.count;
				})
				this.globalUtil.changeVuexStatu(this,that.totalCount,that.totalPrice);
				//原数据数量同时更改
				that.reloadGoodList(data);
			},
			//跳转商品详情
			toGoodDetail: function(goodId) {
				console.log("去商品详情",goodId);
				this.$u.route({
					url:'/pages/common/good/good-detail/good-detail',
					params:{
						skuId:goodId,
					}
				})
			},
			//打开购物车数据弹窗
			showCar:function(){
				if(this.selectedGoods.length<1){
					return;
				}
				this.showCarFlag=true;
			},
			//取消交易
			clearShopCar:function(){
				let that=this;
				this.selectedGoods=[];
				this.$u.vuex("vuex_shopCarData",[]);
				this.globalUtil.changeVuexStatu(this,0,0.00);
				this.showCarFlag=false;
				this.goodList=JSON.parse(JSON.stringify(tempGoodList));
			},
			//购物车里改变数量			
			changeGoodNum:function(good,type){
				let that=this;
				//减1
				if(type==0){
					if(good.count==0){
						that.$u.toast("没有了~");
						return;
					}else{
						good.count--;
						that.totalCount--;
						let totalPrice= Number(that.totalPrice)-Number(good.price);
						that.totalPrice=that.globalUtil.toDecimal(totalPrice);
						if(good.count==0){
							let arr=[];
							for (let i = 0; i < that.selectedGoods.length; i++) {
								 let item= that.selectedGoods[i];
								 let num=item.count;
								 if(num>0){
									 arr.push(item);
								 }
							}
							that.selectedGoods=arr;
						}
						that.globalUtil.changeVuexStatu(that,that.totalCount,that.totalPrice);
					}
				}
				//加1
				if(type==1){
					if(good.maxNum==good.count){
							that.$u.toast("存货不足~");
							return;
					}
					if(that.vuex_totalCount>4){
						that.$u.toast("每笔订单限购5个商品,\r\n再来一单吧!");
						return;
					}
					good.count++;
					that.totalCount++;
					let totalPrice= Number(that.totalPrice)+Number(good.price);
					that.totalPrice=that.globalUtil.toDecimal(totalPrice);
					that.globalUtil.changeVuexStatu(that,that.totalCount,that.totalPrice);
				}
				//原数据数量同时更改
				that.reloadGoodList(good);
				//如果购物车数量为0了,那就不显示购物车旁边的数量角标了
				if(that.selectedGoods.length<1){
					that.showCarFlag=false;
				}else{
					//按购买数量高低排序
					that.selectedGoods.sort((x,y)=>{
						return x.count>y.count;
					});
				}
				this.$u.vuex("vuex_shopCarData",that.selectedGoods);
			},
			//改变界面显示的数据
			reloadGoodList:function(good){
				let that=this;
				let gId=good.skuId;
				for (let i = 0; i < that.goodList.length; i++) {
					let item= that.goodList[i];
					let childrenArr= item.children;
					if(childrenArr.length>0){
						for (let j = 0; j < childrenArr.length; j++) {
						    let child=childrenArr[j];
							if(child.skuId==gId){
								child.count=good.count;
							}
						}
					}
				} 
			},
			//去订单界面
			toConfirmOrder:function(){
				let that=this;
				if(this.selectedGoods.length<1){
					return;
				}
				this.$u.route({
					url:"/pages/common/order/order-booking",
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopcar-container{
		.navbar-box{
			display: flex;
			align-items: center;
			justify-content: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			flex: 1;
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx;
		}
		.foot-box{
			width:100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			align-content: center;
			.footer-tip{
				width: 100%;
				background: #6eb4e1;
				opacity: 0.8;
				border-radius:40px;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding-left: 40rpx;
			}
		}
		.foot-box-disable{
			opacity: 0.4;
		}
		
		.shop-order{
			color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			z-index: 1000;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 40px;
			background-image: url(../../../static/images/shopcar/shopcarbg.png);
		}
	}
</style>
